<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url(./img/big.jpg) 50% 40px;
            background-repeat: no-repeat;
        }

        ul {
            list-style-type: none;
        }

        a {
            text-decoration: none;
        }

        img {
            border-radius: 2px 2px 2px 2px;
        }

        .headdiv {
            height: 40px;
            width: 100%;
        }

        .headdiv ul li {
            float: left;
        }

        .headdiv11 {
            width: 100px;
            height: 40px;
            background-image: url(./img/logo2.png);
            background-repeat: no-repeat;
            margin-left: 260px;
        }

        .headdiv12 {
            width: 240px;
            height: 40px;
            background-image: url(./img/11.jpg);
            background-repeat: no-repeat;
            margin-left: 40px;
        }

        .headdiv13 {
            width: 25px;
            height: 25px;
            margin-left: 370px;
            margin-top: 5px;
            background: url(./img/quan.png) -32px -3px;
        }

        .headdiv14 {
            width: 100px;
            height: 25px;
            margin-top: 7px;
        }

        .headdiv15 {
            width: 140px;
            height: 25px;
            margin-top: 7px;
            margin-left: 12px;
        }

        .headdiv16 {
            width: 20px;
            height: 20px;
            margin-left: -28px;
            margin-top: 6px;
            background: url(./img/quan.png) -3px -7px;
            transform: rotate(90deg);
        }

        .bighead {
            width: 100%;
            height: 100px;
            position: absolute;
            top: 40px;
            left: 0;
            overflow: hidden;
            transition: all 0.5s;
        }

        .div0 {
            width: 100%;
            height: 100px;
            background: rgba(11, 11, 11, 0.8);
            position: absolute;
            top: 0;
            left: 0;
        }

        .bighead:hover {
            height: 380px;
        }

        .divlogo {
            width: 200px;
            height: 100px;
            float: left;
            margin-left: 90px;
            padding-top: 20px;
            padding-left: 10px;
        }

        .div2 {
            width: 900px;
            height: 100px;
            float: left;

        }

        .div2 ul li {
            float: left;
            width: 120px;
            height: 98px;
            margin-left: 5px;
            line-height: 80px;
            text-align: center;
        }

        .div2 ul li a {
            color: white;
            font-size: 18px;
        }

        em {
            display: block;
            margin-top: -50px;
            font-size: 12px;
            color: rgba(248, 245, 245, 0.794);
        }

        .headrightdiv {
            width: 210px;
            height: 100px;
            float: right;
            margin-right: 100px;
        }

        .headrightdiv2 {
            width: 50px;
            height: 50px;
            border: 1px solid #C9A14B;
            border-radius: 50%;
            text-align: center;
            line-height: 75px;
            margin-top: 25px;
            margin-left: 10px;
        }

        .headrightdiv3 {
            margin-left: 70px;
            margin-top: -55px;
        }

        .headrightdiv4 {
            font-size: 14px;
            color: rgba(248, 245, 245, 0.794);
            margin-left: 70px;
            margin-top: 3px;
        }

        .headrightdiv a {
            color: #B1B2BE;
        }

        .div2 ul li:hover {
            background: rgba(187, 153, 38, 0.1);
            border-bottom: 3px solid #C9A14B;
        }

        .div2 ul li:hover a {
            color: #f3c258;
        }

        .div2 ul li:hover em {
            color: #f3c258;
        }

        .unhead {
            width: 100%;
            height: 369px;
            background: rgba(11, 11, 11, 0.6);
        }

        .unhead ul {
            width: 900px;
            height: 235px;
            padding: 10px 40px 30px 0px;
            margin: 100px auto;
            list-style: none;
        }

        .unhead ul li {
            width: 115px;
            height: 180px;
            padding: 2px 2.5px 0;
            float: left;
        }

        .unhead ul li a {
            height: 30px;
            line-height: 30px;
            display: block;
            font-size: 14px;
            color: #c9c9dd;
            width: 100%;
            text-align: center;
        }

        .unhead ul li a:hover {
            color: #f3c258;
            text-decoration: underline;
        }

        .unhead ul li a i {
            width: 17px;
            height: 17px;
            display: inline-block;
            border-radius: 50%;
            vertical-align: middle;
            background: url(./img/index.png) no-repeat -141px -70px;
            margin-right: 3px;
        }

        .unhead ul li a .i1 {
            width: 19px;
            height: 19px;
            display: inline-block;
            border-radius: 50%;
            vertical-align: middle;
            background: url(./img/index.png) no-repeat -139px -7px;
            margin-right: 3px;
        }

        .unhead ul li a em {
            width: 17px;
            height: 1px;
            display: inline-block;
            border-radius: 50%;
            vertical-align: middle;
            background: url(./img/index.png) no-repeat -165px -70px;
            margin-right: 3px;
        }

        .middiv0 {
            width: 1200px;
            height: 340px;
            position: relative;
            left: 160px;
            top: 540px;
        }

        .middiv1 {
            width: 600px;
            height: 340px;
            position: absolute;
        }

        .middiv11 {
            width: 600px;
            height: 290px;
            background-image: url(./img/banner1.jpeg);
        }

        .middiv12 {
            width: 600px;
            height: 50px;
            background: rgba(0, 0, 0);

        }

        .middiv12 ul li {
            float: left;

        }

        .middiv12 ul li a {
            display: block;
            width: 118px;
            height: 48px;
            text-align: center;
            line-height: 48px;
            font-size: 14px;
            color: #B1B2BE;
        }

        .middiv12 ul li:hover a {
            background-color: #262626;
            color: #f3c258;
        }

        .middiv2 {
            width: 350px;
            height: 340px;
            position: absolute;
            left: 600px;
            top: 0;
            background: rgba(0, 0, 0, 0.7);
        }

        .middiv21 {
            width: 300px;
            height: 50px;
            margin: 0 auto;
            border-bottom: 1px solid #000000;
        }

        .middiv21 ul li {
            float: left;
        }

        .middiv21 ul li a {
            display: block;
            width: 50px;
            height: 46px;
            text-align: center;
            line-height: 50px;
            color: #B8B9C5;
        }

        .midrightli a:hover {
            color: #f3c258;
            border-bottom: 3px solid #f3c258;
        }

        .middiv22 p {
            width: 300px;
            height: 36px;
            line-height: 36px;
            margin-top: 18px;
            margin-left: 25px;
            text-align: center;
            box-sizing: border-box;
            padding-left: 5px;
            padding-right: 75px;
            color: #f3c258;
            font-size: 18px;
            background: #414046;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .middiv22 ul li {
            margin-top: 10px;
        }

        .span1 {
            border: 1px solid #f3c258;
            font-size: 13px;
            color: #f3c258;
            margin-left: 25px;
            padding: 0px 3px 0px 3px;
        }

        .span2 {
            font-size: 13px;
            color: #999999;
            position: absolute;
            right: 5px;
            line-height: 17px;
        }

        .middiv22 ul li a i {
            color: #B8B9C5;
            font-size: 15px;
        }

        .middiv3 {
            width: 250px;
            height: 340px;
            position: absolute;
            top: 0;
            left: 950px;
        }

        .middiv31 {
            width: 240px;
            height: 130px;
            position: absolute;
            top: 0;
            left: 0;
            background: url(./img/index.png) 0 381px;
        }

        .middiv32 {
            width: 240px;
            height: 110px;
            position: absolute;
            top: 128px;
            left: 0;
            background: url(./img/index.png) 0 251px;
        }

        .middiv33 {
            width: 240px;
            height: 113px;
            position: absolute;
            top: 237px;
            left: 0;
            background: url(./img/index.png) 0 134px;
        }

        .bottomdiv {
            width: 1240px;
            height: 133px;
            position: relative;
            top: 380px;
            left: -10px;
        }

        .bottomdiv div {
            width: 290px;
            height: 133px;
            float: left;
            margin-left: 10px;
            overflow: hidden;
        }

        .bottomdiv div a img {

            transition: all 0.4s;
        }

        .bottomdiv div a img:hover {
            transform: scale(1.1);
        }

        .contentdiv {
            width: 1197px;
            height: 540px;
            position: relative;
            top: 745px;
            margin: auto;
        }

        .contentleft {
            width: 880px;
            height: 540px;
            position: relative;
            top: 0;
            left: 0;
        }

        .icon1 {
            width: 30px;
            height: 30px;
            position: absolute;
            background: url(./img/index.png) 0 -101px;
        }

        .contentleft h2 {
            position: absolute;
            left: 35px;
        }

        .icon2 {
            width: 50px;
            height: 20px;
            position: absolute;
            top: 5px;
            right: 10px;
        }

        .icon2 a {
            display: block;
            width: 57px;
            height: 20px;
            text-align: right;
            background: url(./img/index.png) -251px 4px;
            color: #999999;
        }

        .contentlefttop {
            width: 880px;
            height: 35px;
            position: absolute;
            top: 40px;
            background-color: #F5F5F5;
        }

        .contentlefttop a {
            width: 288px;
            height: 32px;
            float: left;
            text-align: center;
            line-height: 40px;
            color: #999999;
        }

        .contentlefttop span {
            float: left;
            line-height: 40px;
            color: #999999;
        }

        .contentlefttop a:hover {
            border-bottom: 3px solid #f3c258;
            color: black;
        }

        .contenttitle {
            width: 880px;
            height: 30px;
            position: absolute;
            top: 95px;
        }

        .contenttitle ul li {
            float: left;
            width: 110px;
            height: 25px;
            border-radius: 10px;
            margin-left: 13px;
            background-color: #F5F5F5;
            text-align: center;
            line-height: 25px;

        }

        #firstli {
            width: 60px;
        }

        .contenttitle ul li a {
            color: black;
        }

        .contenttitle ul li:hover {
            background-color: #f3c258;
        }

        .contenttitle ul li:hover a {
            color: white;
        }

        .contentvideo {
            width: 890px;
            height: 390px;
            position: absolute;
            top: 140px;
            left: -10px;
        }

        .contentvideo a {
            display: block;
            width: 210px;
            height: 190px;
            float: left;
            margin-left: 10px;
            color: black;
            font-size: 14px;
        }

        .contentvideo a img {
            scale: 0.9;
            margin: -5px -10px;
        }

        .contentright {
            width: 295px;
            height: 540px;
            position: absolute;
            top: 0;
            left: 900px;
        }

        .icon3 {
            width: 30px;
            height: 30px;
            position: absolute;
            background: url(./img/index.png) 0 -138px;
        }

        .contentright h2 {
            position: absolute;
            left: 35px;
        }

        .contentrighttop {
            width: 295px;
            height: 35px;
            position: absolute;
            top: 40px;
            background-color: #F5F5F5;
        }

        .contentrighttop a {
            width: 95px;
            height: 32px;
            float: left;
            text-align: center;
            line-height: 40px;
            color: #999999;
        }

        .contentrighttop span {
            float: left;
            line-height: 40px;
            color: #999999;
        }

        .contentrighttop a:hover {
            border-bottom: 3px solid #f3c258;
            color: black;
        }

        .contentlaixiao {
            width: 295px;
            height: 155px;
            position: absolute;
            top: 90px;
        }

        .contentlaixiao2 {
            width: 295px;
            height: 65px;
            border: 1px solid #B8B9C5;
            border-top: none;
            position: absolute;
            top: 245px;
        }

        .laixiao {
            margin-top: 10px;
            margin-left: 10px;
            font-size: 20px;
            font-weight: bold;
        }

        .laixiaotime {
            margin-left: 10px;
            font-size: 12px;
            color: #999999;
        }

        .zhao {
            width: 300px;
            height: 200px;
            position: absolute;
            top: 320px;
            left: -7px;
        }

        .zhao ul li {
            width: 68px;
            height: 173px;
            float: left;
            margin-left: 7px;
            position: relative;
            background-color: #000000;
        }

        .zhao ul li img {
            transition: all 0.6s;
        }

        .zhao ul li span {
            display: inline-block;
            width: 3px;
            height: 173px;
            color: #f3c258;
            text-align: center;
            writing-mode: vertical-lr;
            position: absolute;
            top: 0;
            left: 26px;
            margin-right: 50px;
            opacity: 0;
            transition: all 0.6s;
        }

        .zhao ul li:hover img {
            opacity: 0;
        }

        .zhao ul li:hover span {
            opacity: 1;
        }

        .match {
            width: 1197px;
            height: 900px;
            position: relative;
            top: 770px;
            margin: auto;
        }

        .matchleft {
            width: 880px;
            height: 900px;
            position: relative;
            top: 0;
            left: 0;
        }

        .icon3 {
            width: 30px;
            height: 30px;
            position: absolute;
            background: url(./img/index.png) 0 -101px;
        }

        .matchleft h2 {
            position: absolute;
            left: 35px;
        }

        .icon2 {
            width: 50px;
            height: 20px;
            position: absolute;
            top: 5px;
            right: 10px;
        }

        .icon2 a {
            display: block;
            width: 57px;
            height: 20px;
            text-align: right;
            background: url(./img/index.png) -251px 4px;
            color: #999999;
        }

        .matchlefttop {
            width: 880px;
            height: 35px;
            position: absolute;
            top: 40px;
            background-color: #F5F5F5;
        }

        .matchlefttop a {
            display: block;
            float: left;
            line-height: 24px;
            margin-top: 5px;
            padding-left: 22px;
            padding-right: 22px;
            border-left: 1px solid #E1E1E1;
            color: #999999;
            font-size: 15px;
        }

        .matchlefttop a:hover {
            border-bottom: 3px solid #f3c258;
            color: black;
        }

        .matchleftmid {
            width: 880px;
            height: 260px;
            position: relative;
            top: 100px;
        }

        .matchleftmid ul {
            width: 650px;
            height: 260px;
            position: relative;
            top: -265px;
            left: 230px;
        }

        .matchleftmid ul li {
            margin-top: 10px;
            color: #999999;
            font-size: 12px;
        }

        .matchleftmid ul li span {
            font-size: 13px;
            padding: 2px 2px 2px 2px;
            background-color: #E3E3E3;
            color: #999999;
            border-radius: 10px;
        }

        .matchleftmid ul li i {
            display: inline-block;
            width: 540px;
            margin-left: 10px;
            color: black;
            font-size: 15px;
        }

        .matchleftmid ul li i:hover {
            text-decoration: underline;
        }


        .matcha1 {
            font-size: 24px;
            color: black;
        }

        .matcha1:hover {
            text-decoration: underline;
        }

        .matcha2 {
            display: block;
            color: #676767;
        }

        .matchvideo {
            width: 890px;
            height: 390px;
            position: absolute;
            top: 380px;
            left: -10px;
        }

        .matchvideo a {
            display: block;
            width: 210px;
            height: 190px;
            float: left;
            margin-left: 10px;
            color: black;
            font-size: 14px;
        }

        .matchvideo a img {
            scale: 0.9;
            margin: -5px -10px;
        }

        .matchright {
            width: 295px;
            height: 900px;
            position: absolute;
            top: 0;
            left: 900px;
        }

        .icon4 {
            width: 30px;
            height: 30px;
            position: absolute;
            background: url(./img/index.png) -154px -102px;
        }

        .matchright h2 {
            position: absolute;
            left: 35px;
        }

        .matchrighttop {
            width: 295px;
            height: 30px;
            position: absolute;
            top: 42px;
            background-color: #F5F5F5;
        }

        .matchrighttop span {
            display: block;
            float: left;
            width: 82px;
            height: 30px;
            color: #999999;
            text-align: center;
        }

        #span3 {
            width: 41px;
        }

        .matchrightmid {
            width: 295px;
            height: 340px;
            position: absolute;
            top: 75px;
        }

        .matchrightmid ul li span {
            float: left;
            border-bottom: 1px solid #E5E5E5;
        }

        .matchtime {
            display: block;
            width: 81px;
            height: 67px;
            font-size: 12px;
            text-align: center;
            line-height: 67px;
        }

        .matchzhandui1 {
            display: block;
            width: 80px;
            height: 67px;
        }

        .matchzhandui1 span {
            display: block;
            width: 81px;
            height: 57px;
            margin: 10px 0px;
            font-size: 13px;
            text-align: center;
        }

        .matchzhandui1 span img {
            width: 25px;
            height: 25px;
            padding: 0 20px 0 20px;
        }

        .matchvs {
            display: block;
            width: 46px;
            height: 67px;
            text-align: center;
            line-height: 67px;
            color: #f3c258;
        }

        .matchzhandui2 {
            display: block;
            width: 80px;
            height: 67px;
        }

        .matchrightbottom {
            width: 295px;
            height: 155px;
            position: absolute;
            top: 440px;

        }

        .matchrightbottom img {
            width: 295px;
            height: 155px;
        }

        .foot {
            width: 1360px;
            height: 362px;
            color: #323235;
            font-size: 14px;
            padding-left: 160px;
            background: url(./img/bg_footer.webp);
            position: relative;
            top: 620px;
        }

        .foot .footmain {
            width: 1200px;
            height: 276px;
            text-align: left;
            margin-top: 100px;
        }

        .foot .footmain .footlogo {
            display: block;
            float: none;
            height: 66px;
            padding-bottom: 10px;
            margin-bottom: 12px;
            border-bottom: 2px solid #d4d4d4;
        }

        .foot .footmain .footlogo .logo1 {
            display: inline-block;
            width: 285px;
            height: 64px;
            margin: 0;
            background: url(./img/spr.png) no-repeat;
        }

        .foot .footmain .footlogo .logo2 {
            display: inline-block;
            width: 70px;
            height: 64px;
            margin: 0;
            background: url(./img/spr.png) no-repeat -285px 0;
        }

        .foot .footmain .footmain-body {
            position: relative;
            width: 508px;
            height: 86px;
        }

        .foot .footmain .footmain-body .footmain-body-l {
            position: absolute;
            left: 0;
            top: 0;
            padding-top: 0;
            width: 508px;
            font-size: 12px;
            color: #666;
        }

        .footmain-body-l p {
            width: 508px;
            height: 40px;
        }

        .footmain-body-l p em {
            display: inline-block;
            font-style: normal;
            margin-right: 12px;
            color: #6d6d6d;
            font-size: 12px;
        }

        .foot .footmain .footmain-body .footmain-body-r {
            position: absolute;
            right: -692px;
            top: -2px;
            width: 650px;
            height: 120px;
        }

        .footmain-body-r p {
            width: 650px;
            height: 20px;
            font-size: 12px;
        }

        .footmain-body-r p img {
            vertical-align: middle;
            margin-right: 5px;
        }

        .footmain-body-r .p1 {
            height: 40px;
        }

        .r_nav {
            pointer-events: none;
            position: fixed;
            z-index: 3;
            top: 50%;
            right: 0;
            margin-top: -240px;
            width: 254px;
            height: 494px;
            background: url(././img/r_navBg.png) no-repeat top left;
        }

        .r_nav .r_dj {
            position: absolute;
            top: 15px;
            left: 24px;
            z-index: 2;
            width: 165px;
            height: 145px;
            background: url(././img/r_dj.png) no-repeat top center;
        }

        .r_nav .r_dj p {
            display: block;
            position: absolute;
            top: 37px;
            left: 12px;
            width: 88px;
            height: 36px;
            font-size: 14px;
            text-indent: 2px;
            font-weight: bold;
            line-height: 18px;
            color: #62401b;
            overflow: hidden;
        }

        .r_nav .r_dj p:last-child {
            top: 57px;
            display: block;
        }

        .r_nav .r_con {
            pointer-events: auto;
            position: absolute;
            top: 160px;
            left: 85px;
        }

        .r_nav .r_con .r_code {
            margin-top: 1px;
        }

        .r_nav .r_con .r_code.code_wz {
            height: 132px;
            background-position: -243px 0;
        }

        .r_nav .r_con img {
            display: block;
            margin: 0 auto;
        }

        .r_nav .r_con .r_code {
            position: relative;
            width: 117px;
            height: 134px;
            background-position: -246px -1px;
            padding-top: 2px;
        }

        .r_con .down_spr {
            background-image: url(./img/r_all2022.png);
            background-repeat: no-repeat;
            background-size: 360px 569px;
        }

        .r_con .r_wc_yd {
            background-position: -243px -134px;
        }

        .r_con .r_wc_yd {
            width: 117px;
            height: 38px;
            margin-top: 1px;
            position: relative;
        }

        .r_con .r_assBg {
            display: none;
            position: absolute;
            top: -66px;
            left: -116px;
            width: 115px;
            height: 144px;
            background-position: 0 -416px;
            padding-top: 7px;
        }

        .r_assBg p {
            width: 101px;
            height: 34px;
            line-height: 17px;
            color: #dcdcdc;
            font-size: 12px;
            text-align: center;
            margin: 0 auto;
            overflow: hidden;
        }

        .r_assBg p span {
            color: #cd974b;
        }

        .r_con .r_wc_yd:hover {
            background-position: -243px -172px;
        }

        .r_con .r_wc_yd:hover .r_assBg {
            display: block;
        }
    </style>
</head>

<body>
    <div class="headdiv">
        <ul>
            <li>
                <div class="headdiv11">
                </div>

            </li>
            <li>
                <div class="headdiv12">

                </div>
            </li>
            <li>
                <div class="headdiv13">

                </div>

            </li>
            <li>
                <div class="headdiv14">
                    成长守护平台
                </div>
            </li>
            <li>
                <div class="headdiv15">
                    腾讯游戏排行榜
                </div>
            </li>
            <li>
                <div class="headdiv16">

                </div>
            </li>

        </ul>

    </div>
    <div class="bighead">
        <div class="div0">
            <div class="divlogo">
                <a href="#"><img src="./img/logo.png" alt=""></a>
            </div>
            <div class="div2">
                <ul>
                    <li>
                        <a href="#">游戏资料
                            <em>DATA</em>
                        </a>
                    </li>
                    <li>
                        <a href="#">内容中心
                            <em>CONTENTS</em>
                        </a>
                    </li>
                    <li>
                        <a href="#">赛事中心
                            <em>MAT CH</em>
                        </a>
                    </li>
                    <li>
                        <a href="#">百态王者
                            <em>CULTURE</em>
                        </a>
                    </li>
                    <li>
                        <a href="#">社区互动<em>COMMUNITY</em></a>
                    </li>
                    <li>
                        <a href="#">玩家支持
                            <em>PLAYER</em>
                        </a>
                    </li>
                    <li>
                        <a href="#">IP新游
                            <em>NEW GAMES</em>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="headrightdiv">
                <div class="headrightdiv2">
                    <a href="#">
                        <img src="./img/tou.png" alt="">
                    </a>
                </div>
                <div class="headrightdiv3">
                    <a href="#">欢迎登录</a>
                </div>
                <div class="headrightdiv4">
                    登陆后查看游戏战绩
                </div>
            </div>

            <div class="unhead">
                <ul>
                    <li>
                        <a href="#">版本介绍</a>
                        <a href="#">游戏介绍</a>
                        <a href="#">英雄资料</a>
                        <a href="#"><em></em>爆料站</a>
                        <a href="#"><i></i>世界观体验站</a>
                        <a href="#">游戏壁纸</a>
                    </li>
                    <li>
                        <a href="#">攻略中心</a>
                        <a href="#">开放素材库</a>
                        <a href="#"><i></i>内容共创平台</a>
                        <a href="#"><i></i>手语打法参考</a>
                    </li>
                    <li>
                        <a href="#"><em></em>KPL</a>
                        <a href="#">K甲联赛</a>
                        <a href="#">世界冠军杯</a>
                        <a href="#">挑战者杯</a>
                        <a href="#"><em></em>全国大赛</a>
                        <a href="#">女子公开赛</a>
                        <a href="#">高校联赛</a>
                        <a href="#"><i></i>王者赛宝</a>
                        <a href="#">赛事数据</a>
                    </li>
                    <li>
                        <a href="#">荣耀传承</a>
                        <a href="#">王者文化站</a>
                        <a href="#">万千世界</a>
                        <a href="#"><i></i>王者绝悟</a>
                        <a href="#">星光殿堂</a>
                        <a href="#"><i></i>IP共创计划</a>
                        <a href="#">商户特权</a>
                        <a href="#"><i></i>龙翼王者卡</a>
                    </li>
                    <li>
                        <a href="#"><em></em>创意互动营</a>
                        <a href="#"><em></em>王者营地</a>
                        <a href="#">微信圈子</a>
                        <a href="#">官方微博</a>
                        <a href="#">微信公众号</a>
                        <a href="#">手Q订阅号</a>
                    </li>
                    <li>
                        <a href="#">腾讯游戏防沉迷</a>
                        <a href="#"><i class="i1"></i>成长守护平台</a>
                        <a href="#">对局环境情报站</a>
                        <a href="#">客服专区</a>
                        <a href="#">礼包兑换</a>
                        <a href="#">自助服务</a>
                    </li>
                    <li>
                        <a href="#"><i></i>王者荣耀·世界</a>
                        <a href="#"><i></i>代号·破晓</a>
                        <a href="#"><i></i>代号·启程</a>
                        <a href="#"><i></i>王者万象棋</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="middiv0">
        <div class="middiv1">
            <div class="middiv11"></div>
            <div class="middiv12">
                <ul>
                    <li>
                        <a href="#">亚运电竞特许商品</a>

                    </li>
                    <li>
                        <a href="#">峡谷空间站</a>

                    </li>
                    <li>
                        <a href="#">我在王者养灵兽</a>

                    </li>
                    <li>
                        <a href="#">K甲正式开赛</a>

                    </li>
                    <li>
                        <a href="#">神奇传说CG</a>

                    </li>
                </ul>
            </div>
        </div>
        <div class="middiv2">
            <div class="middiv21">
                <ul>
                    <li class="midrightli"><a href="#">热门</a></li>
                    <li class="midrightli"><a href="#">新闻</a></li>
                    <li class="midrightli"><a href="#">公告</a></li>
                    <li class="midrightli"><a href="#">活动</a></li>
                    <li class="midrightli"><a href="#">赛事</a></li>
                    <li><a href="#">···</a></li>
                </ul>
            </div>

            <div class="middiv22">
                <p>蒙犽皮肤设计大赛首轮投票开启公告</p>

                <ul>
                    <li><a href="#"><span class="span1">热门</span><i>星梦大赛全民海选开启，快来Pick...</i><span
                                class="span2">03/09</span></a></li>
                    <li><a href="#"><span class="span1">公告</span><i>月9日全服不停机更新公告</i><span class="span2">03/08</span></a>
                    </li>
                    <li><a href="#"><span class="span1">热门</span><i>杭州亚运会倒计时200天+!首批...</i><span
                                class="span2">03/07</span></a></li>
                    <li><a href="#"><span class="span1">热门</span><i>春日主题荣耀播报方案票选结果公....</i><span
                                class="span2">03/06</span></a></li>
                    <li><a href="#"><span class="span1">热门</span><i>蒙扮皮肤设计大赛创意赏析第十—...</i><span
                                class="span2">03/03</span></a></li>
                    <li><a href="#"><span class="span1">公告</span><i>互动小任务第21期-春日荣耀播报...</i><span
                                class="span2">03/03</span></a></li>
                    <li><a href="#"><span class="span1">热门</span><i>3月2日全服不停机更新公告</i><span
                                class="span2">03/01</span></a></li>

                </ul>
            </div>
        </div>
        <div class="middiv3">

            <div class="middiv31"></div>
            <div class="middiv32"></div>
            <div class="middiv33"></div>
        </div>

        <div class="bottomdiv">
            <div>
                <a href="#">
                    <img src="./img/un1.jpg" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./img/un2.png" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./img/un3.jpg" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./img/un4.png" alt="">
                </a>
            </div>
        </div>
    </div>

    <div class="contentdiv">
        <div class="contentleft">

            <div class="icon1"></div>
            <h2>内容中心</h2>
            <div class="icon2">
                <a href="#">
                    更多
                </a>
            </div>

            <div class="contentlefttop">
                <a href="#">精品栏目</a>
                <span>|</span>
                <a href="#">赛事精品</a>
                <span>|</span>
                <a href="#">英雄攻略</a>
            </div>

            <div class="contenttitle">
                <ul>
                    <li id="firstli"><a href="#">最新</a></li>
                    <li><a href="#">峡谷大气层</a></li>
                    <li><a href="#">马波罗奇闻录</a></li>
                    <li><a href="#">狄仁杰封神榜</a></li>
                    <li><a href="#">游走基本法</a></li>
                    <li><a href="#">野王修炼手册</a></li>
                    <li><a href="#">法王的荣耀</a></li>
                </ul>
            </div>

            <div class="contentvideo">
                <a href="#"><img src="./img/vedio.jpg" alt="">峡谷大气层│停停停，我来简单a两下</a>
                <a href="#"><img src="./img/vedio.jpg" alt="">峡谷大气层│停停停，我来简单a两下</a>
                <a href="#"><img src="./img/vedio.jpg" alt="">峡谷大气层│停停停，我来简单a两下</a>
                <a href="#"><img src="./img/vedio.jpg" alt="">峡谷大气层│停停停，我来简单a两下</a>
                <a href="#"><img src="./img/vedio.jpg" alt="">峡谷大气层│停停停，我来简单a两下</a>
                <a href="#"><img src="./img/vedio.jpg" alt="">峡谷大气层│停停停，我来简单a两下</a>
                <a href="#"><img src="./img/vedio.jpg" alt="">峡谷大气层│停停停，我来简单a两下</a>
                <a href="#"><img src="./img/vedio.jpg" alt="">峡谷大气层│停停停，我来简单a两下</a>
            </div>

        </div>

        <div class="contentright">

            <div class="icon3"></div>
            <h2>英雄/皮肤</h2>

            <div class="icon2">
                <a href="#">
                    更多
                </a>
            </div>

            <div class="contentrighttop">
                <a href="#">最新英雄</a>
                <span>|</span>
                <a href="#">最新皮肤</a>
                <span>|</span>
                <a href="#">周免英雄</a>
            </div>

            <div class="contentlaixiao">
                <img src="./img/laixiao.jpg" alt="">
            </div>
            <div class="contentlaixiao2">
                <div class="laixiao">新英雄：莱西奥</div>
                <div class="laixiaotime">上线时间：2023.01.03</div>
            </div>
 
            <div class="zhao">
                <ul>
                    <li><a href="#"><img src="./img/zhao.jpg" alt=""><span>赵怀真</span></a></li>
                    <li><a href="#"><img src="./img/zhao.jpg" alt=""><span>赵怀真</span></a></li>
                    <li><a href="#"><img src="./img/zhao.jpg" alt=""><span>赵怀真</span></a></li>
                    <li><a href="#"><img src="./img/zhao.jpg" alt=""><span>赵怀真</span></a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="match">
        <div class="matchleft">

            <div class="icon3"></div>
            <h2>赛事中心</h2>
            <div class="icon2">
                <a href="#">
                    更多
                </a>
            </div>

            <div class="matchlefttop">
                <a href="#">KPL</a>
                <a href="#">世界杯冠军</a>
                <a href="#">挑战者杯</a>
                <a href="#">全国大赛</a>
                <a href="#">高校联赛</a>
                <a href="#">TGA</a>
                <a href="#">微信游戏邀请赛</a>
                <a href="#">模拟战大师赛</a>
            </div>

            <div class="matchleftmid">
                <a href="#" class="matcha">
                    <img src="./img/match1.jpg" alt="">
                </a>

                <ul>
                    <li>
                        <a href="#" class="matcha1">
                            HI四连胜收官第一阶段，NBW.小清阿古朵豪夺三杀
                        </a>
                        <a href="#" class="matcha2">
                            HI四连胜收官第一阶段，NBW.小清阿古朵豪夺三杀
                        </a>
                    </li>
                    <li><span>K甲联赛</span><a href="#"><i>NBW.小清澜越塔三杀，BOA.郁上梦奇四杀翻盘</i></a>03-14</li>
                    <li><span>K甲联赛</span><a href="#"><i>NBW.小清澜越塔三杀，BOA.郁上梦奇四杀翻盘</i></a>03-14</li>
                    <li><span>K甲联赛</span><a href="#"><i>NBW.小清澜越塔三杀，BOA.郁上梦奇四杀翻盘</i></a>03-14</li>
                    <li><span>K甲联赛</span><a href="#"><i>NBW.小清澜越塔三杀，BOA.郁上梦奇四杀翻盘</i></a>03-14</li>
                    <li><span>K甲联赛</span><a href="#"><i>NBW.小清澜越塔三杀，BOA.郁上梦奇四杀翻盘</i></a>03-14</li>
                    <li><span>K甲联赛</span><a href="#"><i>NBW.小清澜越塔三杀，BOA.郁上梦奇四杀翻盘</i></a>03-14</li>

                </ul>
            </div>

            <div class="matchvideo">
                <a href="#"><img src="./img/match2.jpg" alt="">【赛后采访】NBW.爱笑:算是轻松了很多，毕竟是前3名</a>
                <a href="#"><img src="./img/match2.jpg" alt="">【赛后采访】NBW.爱笑:算是轻松了很多，毕竟是前3名</a>
                <a href="#"><img src="./img/match2.jpg" alt="">【赛后采访】NBW.爱笑:算是轻松了很多，毕竟是前3名</a>
                <a href="#"><img src="./img/match2.jpg" alt="">【赛后采访】NBW.爱笑:算是轻松了很多，毕竟是前3名</a>
                <a href="#"><img src="./img/match2.jpg" alt="">【赛后采访】NBW.爱笑:算是轻松了很多，毕竟是前3名</a>
                <a href="#"><img src="./img/match2.jpg" alt="">【赛后采访】NBW.爱笑:算是轻松了很多，毕竟是前3名</a>
                <a href="#"><img src="./img/match2.jpg" alt="">【赛后采访】NBW.爱笑:算是轻松了很多，毕竟是前3名</a>
                <a href="#"><img src="./img/match2.jpg" alt="">【赛后采访】NBW.爱笑:算是轻松了很多，毕竟是前3名</a>
            </div>

        </div>

        <div class="matchright">

            <div class="icon4"></div>
            <h2>KPL赛程</h2>

            <div class="icon2">
                <a href="#">
                    更多
                </a>
            </div>

            <div class="matchrighttop">
                <span>时间</span>
                <span>战队</span>
                <span id="span3"></span>
                <span>战队</span>
            </div>

            <div class="matchrightmid">
                <ul>
                    <li>
                        <span class="matchtime">03-15 20:00</span>
                        <span class="matchzhandui1">
                            <span>
                                <img src="./img/zhandui.jpg" alt="">
                                XYG
                            </span>
                        </span>
                        <span class="matchvs">VS</span>
                        <span class="matchzhandui1">
                            <span>
                                <img src="./img/zhandui.jpg" alt="">
                                XYG
                            </span>
                        </span>
                    </li>
                    <li>
                        <span class="matchtime">03-16 17:00</span>
                        <span class="matchzhandui1">
                            <span>
                                <img src="./img/zhandui.jpg" alt="">
                                上海RNG.M
                            </span>
                        </span>
                        <span class="matchvs">VS</span>
                        <span class="matchzhandui1">
                            <span>
                                <img src="./img/zhandui.jpg" alt="">
                                上海RNG.M
                            </span>
                        </span>
                    </li>
                    <li>
                        <span class="matchtime">03-16 20:00</span>
                        <span class="matchzhandui1">
                            <span>
                                <img src="./img/zhandui.jpg" alt="">
                                重庆狼队
                            </span>
                        </span>
                        <span class="matchvs">VS</span>
                        <span class="matchzhandui1">
                            <span>
                                <img src="./img/zhandui.jpg" alt="">
                                重庆狼队
                            </span>
                        </span>
                    </li>
                    <li>
                        <span class="matchtime">03-17 17:00</span>
                        <span class="matchzhandui1">
                            <span>
                                <img src="./img/zhandui.jpg" alt="">
                                长沙TES.A
                            </span>
                        </span>
                        <span class="matchvs">VS</span>
                        <span class="matchzhandui1">
                            <span>
                                <img src="./img/zhandui.jpg" alt="">
                                长沙TES.A
                            </span>
                        </span>
                    </li>
                    <li>
                        <span class="matchtime">03-18 17:00</span>
                        <span class="matchzhandui1">
                            <span>
                                <img src="./img/zhandui.jpg" alt="">
                                XYG
                            </span>
                        </span>
                        <span class="matchvs">VS</span>
                        <span class="matchzhandui1">
                            <span>
                                <img src="./img/zhandui.jpg" alt="">
                                XYG
                            </span>
                        </span>
                    </li>
                </ul>
            </div>

            <div class="matchrightbottom">
                <img src="./img/match3.jpg" alt="">
            </div>

        </div>
    </div>

    <div class="foot">
        <div class="footmain">
            <div class="footlogo">
                <a href="#" class="logo1"></a>
                <a href="#" class="logo2"></a>
            </div>
            <div class="footmain-body">
                <div class="footmain-body-l">
                    <p><em>抵制不良游戏</em><em>拒绝盗版游戏</em><em>注意自我保护</em><em>谨防受骗上当</em><em>适度游戏益脑</em><em>沉迷游戏伤身</em><em>合理安排时间</em><em>享受健康生活</em>
                    </p>
                    <p>《王者荣耀》全部背景故事发生于架空世界“王者大陆”中。相关人物、地理、事件均为艺术创作，并非正史。若因观看王者故事对相关历史人物产生兴趣，建议查阅正史记载。</p>
                </div>
                <div class="footmain-body-r">
                    <p class="p1">腾讯互动娱乐 | 服务条款 | 王者荣耀隐私保护指引 | 儿童隐私保护指引 | 腾讯游戏招聘|腾讯游戏客服 | 游戏列表 | 广告服务及商务合作</p>
                    <p>COPYRIGHT © 1998 - 2023 TENCENT. ALL RIGHTS RESERVED. 腾讯公司版权所有 网络游戏行业防沉迷自律公约</p>
                    <p>
                        <img src="./images/gswj.png" alt="">工商网监电子标识 | 粤网文[2020]3396-195号 | （署）网出证（粤）字第054号
                    </p>
                    <p>
                        <img src="./images/gsw.png" alt="">文网游备字[2016]M-CSG 0059 号 | 新广出审[2017] 6712号 | ISBN
                        978-7-7979-8408-9
                    </p>
                    <P>全国文化市场统一举报电话：12318</P>
                </div>
            </div>
        </div>
    </div>

    <div class="r_nav">
        <div class="r_dj">
            <p>扫一扫，立刻</p>
            <p>下载游戏~</p>
        </div>
        <ul class="r_con">
            <li class="r_code down_spr code_wz">
                <img src="././img/gzh_code.jpg" alt="" width="107" height="107">
            </li>
            <li class="r_wc_yd tganime-fadein-trigger down_spr">
                <div class="r_assBg tganime-fadein-child down_spr">
                    <img src="./img/yd_qrcode.webp" alt="" class="assCode" width="101" height="100">
                    <p>
                        扫码
                        <span>下载王者营地</span><br>
                        每天
                        <span>领取福利好礼</span>
                    </p>
                </div>
            </li>
            <li class="r_wc_yd tganime-fadein-trigger down_spr">
                <div class="r_assBg tganime-fadein-child down_spr">
                    <img src="./img/yd_qrcode.webp" alt="" class="assCode" width="101" height="100">
                    <p>
                        扫码
                        <span>关注官方微博</span><br>
                        每天
                        <span>一手爆料及福利</span>
                    </p>
                </div>
            </li>
            <li class="r_wc_yd tganime-fadein-trigger down_spr">
                <div class="r_assBg tganime-fadein-child down_spr">
                    <img src="./img/yd_qrcode.webp" alt="" class="assCode" width="101" height="100">
                    <p>
                        扫码
                        <span>关注官方公众号</span><br>
                        每天
                        <span>最新资讯及好礼</span>
                    </p>
                </div>
            </li>
            <li class="r_wc_yd tganime-fadein-trigger down_spr">
                <div class="r_assBg tganime-fadein-child down_spr">
                    <img src="./img/yd_qrcode.webp" alt="" class="assCode" width="101" height="100">
                    <p>
                        扫码
                        <span>关注官方视频号</span><br>
                        每天
                        <span>精彩视频及福利</span>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</body>

</html>